<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>任务2使用Vue指令实现数据展示</title>
	<link rel="stylesheet" type="text/css" href="css/public.css" />
	<link rel="stylesheet" type="text/css" href="css/phone.css" />
	<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>

<body>
	<!-- 209001047-何豪 -->
	<div id="app"></div>
	<template id="root">
		<div class="box">
			<div class="box_hd">
				<h2 class="title">
					手机
				</h2>
				<div class="more">
					<a href="#">
						查看更多
					</a>
				</div>
			</div>
			<div class="">
				<div class="box_left">
					<img src="images/ad1.png" width="240">
				</div>
				<div class="box_right">
					<ul class="">
						<li class="phone_item" v-for="phone in phoneList" :key="phone.id">
							<a href="#">
								<div class="ph">
									<img :src="phone.img" width="160">
								</div>
								<div class="phone_title">{{phone.title}}</div>
								<p class="desc">{{phone.desc}}</p>
								<p class="price">
									<span>{{phone.price}}</span>
									元起
								</p>
							</a>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</template>
	<script src="js/phone.js" type="text/javascript" charset="utf-8"></script>
</body>

</html>